<template>
	<p>张橙仔的成绩：</p>
	<p v-if="type==='A'">优秀</p>
	<p v-else-if="type==='B'">良好</p>
	<p v-else>及格</p>
	
	<button @click="type='A'">A:切换成优秀</button>
	<button @click="type='B'">B:切换成良好</button>
	<button @click="type='C'">C:切换成及格</button>
</template>

<script setup>
	import { ref } from 'vue'

	//演示v-if指令
	//v-if是根据布尔值切换元素的显示或隐藏状态，本质是通过操作DOM元素来切换显示状态。
	//当给定的值为true时，元素存在于DOM树中；
	//当给定的值为false时，元素从DOM树中移除。
	//定义数据
	const type=ref('A')
	const isShow=ref(false)

</script>

<style>
</style>